<template>
  <div class="dashboard-container">
    <template>
      <div class="home">
        <!-- 学生人数统计南丁格尔玫瑰图 -->
        <div class="left_pic">
          <el-card class="chart-card">
            <div slot="header">
              <h3 class="chart-title">各学院学生人数统计</h3>
            </div>
            <div>
              <div id="main2" ref="main2"></div>
            </div>
          </el-card>
        </div>

        <div class="right">
          <!-- 补助金额发放统计折线图 -->
          <div class="line_box">
            <el-card class="chart-card">
              <div slot="header">
                <h3 class="chart-title">补助金额发放统计</h3>
              </div>
              <div id="main1" ref="main1"></div>
            </el-card>
          </div>


          <!-- 公告板 -->
          <div class="notice">
            <el-card class="notice-card">
              <div slot="header">
                <h3 class="notice-title">公告板</h3>
              </div>
              <div class="notice-content">
                <el-timeline>
                  <el-timeline-item timestamp="2023/02/28">
                    <el-button @click="jump" type="text">学校更新了新的岗位</el-button>
                    <!-- <p>学校更新了新的岗位</p> -->
                  </el-timeline-item>
                  <el-timeline-item timestamp="2023/02/25">
                    <!-- <p>学校更新了新的岗位</p> -->
                    <el-button @click="jump" type="text">学校更新了新的岗位</el-button>

                  </el-timeline-item>
                  <el-timeline-item timestamp="2023/02/23">
                    <!-- <p>学校更新了新的岗位</p> -->
                    <el-button @click="jump" type="text">学校更新了新的岗位</el-button>
                  </el-timeline-item>
                </el-timeline>
              </div>
            </el-card>
          </div>
        </div>

      </div>
    </template>



  </div>
</template>

<!-- <script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script> -->
<script>
import jobApi from '@/api/job'
import * as echarts from 'echarts';
export default {
  name: 'HomePage',
  data() {
    return {
      count: '',
      job1Pay: 0,//程序员
      job2Pay: 0,//网页设计师
      job3Pay: 0,//系统分析师
      job4Pay: 0,//数据库管理员
      job5Pay: 0,//网络工程师
      job6Pay: 0,//数据分析师
      job7Pay: 0,//其他
      pieList: [],
      salaryList: [],
      salaryListTemp:[],
      typeList: ['信息工程学院', '金融贸易学院', '传媒与艺术学院', '国际学院'],
    }
  },
  methods: {
    chart1() {
      var chartDom = document.getElementById('main1');
      var myChart = echarts.init(chartDom);
      var option
      option = {
        xAxis: {
          type: 'category',
          data: ['程序员', '网页设计师', '系统分析师', '数据库管理员', '网络工程师', '数据分析师', '其他']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.salaryListTemp,
            type: 'line'
          }
        ]
      };
      jobApi.salaryPayment()
        .then(res => {
          var P = res.data.item
          for (let i = 0; i < P.length; i++) {
            if (P[i].jobName == "程序员") {
              this.job1Pay = this.job1Pay + P[i].paymentAmount
            } else if (P[i].jobName == "网页设计师") {
              this.job2Pay = this.job2Pay + P[i].paymentAmount
            } else if (P[i].jobName == "系统分析师") {
              this.job3Pay = this.job3Pay + P[i].paymentAmount
            } else if (P[i].jobName == "数据库管理员") {
              this.job4Pay = this.job4Pay + P[i].paymentAmount
            } else if (P[i].jobName == "网络工程师") {
              this.job5Pay = this.job5Pay + P[i].paymentAmount
            } else if (P[i].jobName == "数据分析师") {
              this.job6Pay = this.job6Pay + P[i].paymentAmount
            } else {
              this.job7Pay = this.job7Pay + P[i].paymentAmount
            }
          }
          this.salaryList = [
            this.job1Pay, this.job2Pay, this.job3Pay, this.job4Pay, this.job5Pay, this.job6Pay, this.job7Pay,
          ]
            console.log("item",this.salaryList)
          for (var j = 0; j <  this.salaryList.length; j++) {
            var item = this.salaryList[j];
            console.log("item",item)
            this.salaryListTemp.push(item);
          }
          setTimeout(() => {
            option && myChart.setOption(option);
          }, 200)

        })
        .catch(error => {
          console.log(error)
        })

    },
    jump() {
      this.$router.push({
        name: 'jobInformation',
      });
    },
  },

  mounted() {
    this.chart1()
    var chartDom = document.getElementById('main2');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      legend: {
        top: 'bottom'
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      series: [
        {
          name: 'Nightingale Chart',
          type: 'pie',
          radius: [50, 250],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 8
          },
          data: this.pieList
        }
      ]
    };
    jobApi.countCollege()
      .then(res => {
        for (let i = 0; i < res.data.members.length; i++) {
          var d = new Object();
          d.name = this.typeList[i];
          d.value = res.data.members[i];
          this.pieList.push(d)
        }
        // console.log("this.pieList",this.pieList)s
        option && myChart.setOption(option);
      })
      .catch(error => {
        console.log(error)
      })
  },
}
</script>

<style >
.home {
  display: flex;
  justify-content: space-between;
  width: 100%;

}

.left_pic {
  width: 49%;
  height: auto;
}

.right {
  width: 49%;
  height: auto;
}

.line_box {
  width: 100%;
  height: auto;
}

#main1 {
  width: auto;
  height: 300px;
}

#main2 {
  width: auto;
  height: 680px;
}
</style>
